<template>
    <div class="container">
        <div class="search">
            <van-search
                v-model="input"
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
                @search="onSearch"
            >
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </div>
        <!-- <div class="history-search">
            <div class="history-search-title">最近搜索</div>
            <div class="list">
                <div class="item">果冻橙</div>
            </div>
        </div> -->
        <div class="data-list">
            <div class="total">为您找到约{{ total }}条信息</div>
            <nuxt-link
                v-for="(item, index) in pageDataList"
                :key="index"
                :to="`/quizdata/${item.quizData.id}.html`"
                target="_blank"
                class="data-item"
            >
                <div class="title" v-html="item.quizData.title"></div>
                <div
                    class="content"
                    v-html="item.quizData.answer_content"
                ></div>
                <div class="date">
                    {{ getTime(item.quizData.createtime * 1000) }}
                </div>
            </nuxt-link>
        </div>

        <div class="page">
            <van-pagination
                v-model="page"
                :total-items="total"
                :show-page-size="3"
                :items-per-page="limit"
                force-ellipses
                @change="currentChange"
            />
        </div>

        <van-overlay :show="loading">
            <div class="wrapper" @click.stop>
                <van-loading vertical color="#ffffff">加载中...</van-loading>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { quizSearch } from "@/assets/api/searchApi";
import {
    readJsonFileContent,
    getText,
    goTopSmooth,
    answerFormat,
    getTime2,
} from "@/assets/utils/utils";

import { getanalysedata2 } from "@/assets/api/indexApi.js";

var quizDataList = [];
export default {
    name: "QuizDataSearch",
    async asyncData({ params, query }) {
        let data = {};

        return data;
    },
    layout: "home",
    head() {
        return {
            title: this.mateInfo.title + "搜索结果-【小竹财税平台】",
            meta: [
                {
                    name: "keywords",
                    content: "小竹财税问题库",
                },
            ],
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    data() {
        return {
            retrieveFields: ["answer_content", "title"],
            retrieveFieldsIndex: 2,

            input: "",
            mateInfo: {
                title: "",
                keywords: "",
                description: "",
            },

            sortPushDate: null, // 升序：0，降序：1
            dateFilterate: 0,

            limit: 15,
            page: 1,
            total: 0,
            pageDataList: [],

            loading: false,

            queryKeywords: [],

            getTime: getTime2,
        };
    },
    mounted() {
        this.input = this.$route.query.k;
        this.mateInfo.title = this.input;
        this.page = 1;
        if (this.input) {
            this.quizSearch();
            getanalysedata2({
                m_id: 1,
                type: 1,
                code: "PB2",
                describe: "搜索-" + this.input,
            });
        }
    },
    methods: {
        onSearch() {
            if (!this.input) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }
            this.date = "";
            this.dateFilterate = 0;
            this.mateInfo.title = this.input;
            this.sortPushDate = null;
            this.page = 1;
            this.$router.push({
                path: "/quizdata/search",
                query: {
                    k: this.input,
                },
            });
            getanalysedata2({
                m_id: 1,
                type: 1,
                code: "PB2",
                describe: "搜索-" + this.input,
            });
            this.quizSearch();
        },

        async quizSearch() {
            if (!this.input) {
                this.input = this.$route.query.k;
            }
            if (this.loading) return;
            this.loading = true;

            this.mateInfo.title = this.input;
            let params = {
                query: this.input,
                retrieveFields:
                    this.retrieveFieldsIndex == 0
                        ? this.retrieveFields
                        : [this.retrieveFields[1]],
                page: this.page,
                pageSize: this.limit,
            };
            if (this.sortPushDate !== null)
                params.sortList = [{ createtime: this.sortPushDate }];
            if (this.date) {
                params.dateScope = {
                    startDate: this.date[0],
                    endDate: this.date[1],
                };
            }
            const res = await quizSearch(params);
            if (res.status == 0) {
                this.total = res.data.resultTotal;
                this.queryKeywords = res.data.queryKeywords;
                quizDataList = res.data.result;

                this.getPageData();
            }
        },

        // 取到当前分页的数据
        async getPageData() {
            for (let item of quizDataList) {
                let data = await readJsonFileContent(item.matchDataUrl);
                data.data.answer_content = getText(
                    data.data.answer_content,
                    120
                );
                item.quizData = {
                    ...data.data,
                };
            }
            this.pageDataList = answerFormat(
                quizDataList,
                this.queryKeywords,
                this.retrieveFieldsIndex
            );
            this.$nextTick(() => {
                this.loading = false;
                goTopSmooth();
            });
        },

        currentChange(page) {
            if (this.loading) return;
            this.page = page;
            goTopSmooth();
            this.quizSearch();
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    // background-color: #f6f6f6;
}

.search {
    padding: 0.7rem 0.2rem;
}

.data-list {
    background-color: #f6f6f6;
    padding: 0 0.9rem;
    min-height: 100vh;
    .total {
        color: #666666;
        font-size: 0.75rem;
        padding: 0.4rem 0;
    }
}

.data-item {
    display: block;
    background-color: #ffffff;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.6rem;
    border-radius: 0.2rem;
    .title {
        color: #3d3d3d;
        font-size: 1.1rem;
        margin-bottom: 0.35rem;
    }
    .content {
        font-size: 0.75rem;
        color: #999999;
    }
    .date {
        margin-top: 0.35rem;
        color: #999999;
        font-size: 0.68rem;
    }
    > div {
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        -webkit-line-clamp: 2; /* 限定显示的行数，这里设置为3行 */
        -webkit-box-orient: vertical; /* 这使得display:-webkit-box生效 */
        display: -webkit-box; /* 作为flex容器的webkit版本 */
        white-space: normal;
        line-height: 1.5;
    }
}

.page {
    padding: 1rem 0;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
